import { Image } from 'antd';
import { useState } from 'react';

import BackTop from '@/assets/img/backTop.png';
import bzoff from '@/assets/img/bz_off.png';
import bzon from '@/assets/img/bz_on.png';
import qrImg from '@/assets/img/focus.png';
import foldImg from '@/assets/img/fold.png';
import gzoff from '@/assets/img/gz_off.png';
import gzon from '@/assets/img/gz_on.png';
import kfoff from '@/assets/img/kf_off.png';
import kfon from '@/assets/img/kf_on.png';
import unfoldImg from '@/assets/img/unfold.png';
import zqoff from '@/assets/img/zq_off.png';
import zqon from '@/assets/img/zq_on.png';

import './sideBar.css';

export default function SideBarBlock() {
  const [fold, setFold] = useState(true);

  return (
    <div
      className={[
        'fixed',
        'right-[0]',
        'top-[50%]',
        'z-10',
        fold ? 'mt-[-100px]' : 'mt-[-280px]',
      ].join(' ')}
    >
      {fold ? (
        <div className="flex h-[120px] w-[50px] cursor-pointer" onClick={() => setFold(false)}>
          <img src={foldImg} alt="fold" />
        </div>
      ) : (
        <div className="relative mr-[20px] flex h-[540px] flex-col">
          <div className="abslute z-0 flex w-[120px]">
            <img className="w-[90px]" src={unfoldImg} alt="logo" />
          </div>
          <div className="items-box absolute top-[50px] ml-[15px] flex w-[60px] flex-col items-center justify-around pt-[42px] text-[14px]">
            <div className="side-item flex cursor-pointer flex-col items-center gap-[4px]">
              <Image preview={false} className="on w-[20px]" src={kfon} alt="kfon" />
              <Image preview={false} className="off w-[20px]" src={kfoff} alt="kfoff" />
              在线客服
            </div>
            <div className="side-item flex cursor-pointer flex-col items-center gap-[4px]">
              <Image preview={false} className="on w-[20px]" src={zqon} alt="kfon" />
              <Image preview={false} className="off w-[20px]" src={zqoff} alt="kfoff" />
              如何赚钱
            </div>
            <div className="side-item flex cursor-pointer flex-col items-center gap-[4px]">
              <Image preview={false} className="on w-[20px]" src={gzon} alt="kfon" />
              <Image preview={false} className="off w-[20px]" src={gzoff} alt="kfoff" />
              关注优T
              <img className="qrcode" src={qrImg} width={300} alt="qr" />
            </div>
            <div className="side-item flex cursor-pointer flex-col items-center gap-[4px]">
              <Image preview={false} className="on w-[20px]" src={bzon} alt="kfon" />
              <Image preview={false} className="off w-[20px]" src={bzoff} alt="kfoff" />
              帮助中心
            </div>
            <div
              className="flex cursor-pointer flex-col items-center"
              onClick={() => window.scrollTo(0, 0)}
            >
              <img className="w-[28px]" src={BackTop} alt="back top" />
              <div>回到顶部</div>
            </div>
            <div className="w-[120px] cursor-pointer" onClick={() => setFold(true)}>
              &nbsp;
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
